import React, {useEffect, useState} from "react";
import {Row, Col, Select, DatePicker} from "antd";
import moment from "moment";

const {RangePicker} = DatePicker

function Head({
                title = "广播节目",
                onDatePickerChange,
                channelList,
                onChannelChange,
                times
              }) {
  const inputWidth = '220px'
  const [list, setList] = useState([])
  useEffect(() => {
    setList([{id: '', name: '全部'}, ...channelList])
  }, [channelList])


  return (
    <>
      <Row type={'flex'} align={'middle'}>
        <Col>
          {title}:&nbsp;&nbsp;<Select defaultValue={''} style={{width: inputWidth}} onChange={onChannelChange}>
          {
            list.map((item, index) => {
              return (
                <Select.Option key={index} value={item.id}>{item.name}</Select.Option>
              )
            })
          }

        </Select>
        </Col>
        <Col offset={1}>
          选择日期:&nbsp;&nbsp;
          <RangePicker
            style={{width: inputWidth}}
            onChange={onDatePickerChange}
            defaultValue={times}
            defaultPickerValue={times}
            allowClear={false}
          />
        </Col>
      </Row>
    </>
  )
}

export default Head
